<template>
  <view id="home">
    <swiper
      @change="changeSwiper"
      :current="current"
      class="swiper"
      :interval="2000"
      :duration="500">
      <swiper-item>
        <zk-inventoryStatistics></zk-inventoryStatistics>
      </swiper-item>
      <swiper-item>
        <zk-largeScreen></zk-largeScreen>
      </swiper-item>
    </swiper>
    <div
      v-if="userStore.swiperDots"
      class="uni-swiper-dots uni-swiper-dots-horizontal">
      <div
        @tap="current = 0"
        class="uni-swiper-dot"
        :class="{ 'uni-swiper-dot-active': current === 0 }"></div>
      <div
        @tap="current = 1"
        class="uni-swiper-dot"
        :class="{ 'uni-swiper-dot-active': current === 1 }"></div>
    </div>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from "@/stores/modules/member";
const userStore = useMemberStore();
const current = ref(0);
onMounted(() => {
  userStore.getStashlist();
  userStore.getGoodsTypeList();
});
const changeSwiper = (e: any) => {
  current.value = e.detail.current;
};
</script>

<style lang="scss" scoped>
#home {
  height: 100vh;
  width: 100vw;
  background: url("~@/static/img/largeScreen/bg.png");
  background-size: 100% 100%;
  .swiper {
    height: 100%;
    width: 100%;
  }

  .uni-swiper-dots {
    width: 100vw;
    position: fixed;
    bottom: 50%;
    z-index: 0;
    .uni-swiper-dot {
      width: 72px;
      height: 72px;
      background-color: #05100c;
      box-shadow: 0px 0px 20px 0px rgba(27, 204, 209, 0.5);
      opacity: 0.5;
      position: fixed;
      transform: translateY(-50%);
      &.uni-swiper-dot-active {
        background-color: #049e92;
        box-shadow: 0px 0px 20px 0px rgba(27, 204, 209, 0.5);
        opacity: 0.5;
      }
    }
    & :first-child {
      left: 10px;
      top: 50%;
      &::after {
        content: url("~@/static/img/largeScreen/left.png");
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    & :last-child {
      right: 10px;
      top: 50%;
      &::after {
        content: url("~@/static/img/largeScreen/right.png");
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
